<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-content">
                <a-table
                    :stripe="true"
                    :columns="columns"
                    :data="userTaskList"
                    :pagination="false"
                >
                    <template #is_checked="{ record }">
                        {{ record.is_checked ? '是' : '否' }}
                    </template>

                    <template #operate="{ record }">
                        <a-button
                            size="mini"
                            type="primary"
                            ghost
                            status="danger"
                            :disabled="disable"
                            @click="detail(record)"
                            >{{ $t('basics.xiangqing') }}</a-button
                        >
                        <a-button
                            size="mini"
                            type="primary"
                            class="ml-3"
                            ghost
                            status="warning"
                            :disabled="disable"
                            @click="changeStatus(record)"
                        >
                            {{ $t('basics.SetAsSelected') }}</a-button
                        >

                        <a-button
                            size="mini"
                            class="ml-3"
                            type="primary"
                            status="danger"
                            :disabled="disable"
                            @click="deleted(record, 'shanchu')"
                            >{{ $t('basics.shanchu') }}</a-button
                        >
                    </template>
                </a-table>
                <div class="_crud-footer mt-3 text-right" ref="crudFooterRef">
                    <a-pagination
                        :total="pageList.total"
                        show-total
                        show-jumper
                        show-page-size
                        @page-size-change="getList"
                        @change="getList"
                        v-model:current="form.page"
                        v-model:page-size="form.pageSize"
                        style="display: inline-flex"
                        :page-size-options="[10, 20, 50, 100]"
                        :default-page-size="100"
                    />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance } from 'vue';
import {
    getProjectList,
    getUserprojectDetail,
    getUserTaskList,
    deleteUserTask,
    updateStatus
} from '@/api/america/massProduction.js';
import { useAppStore, useUserStore, useMessageStore } from '@/store';
import {
    getProjectId,
    resendTemplate,
    myDelete,
    getDetailPageList,
    setIsChecked
} from '@/api/cloud/userProject.js';

import { Message } from '@arco-design/web-vue';
import getUserInfo from '@/store/modules/user';
import { useRouter, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const appStore = useAppStore();
const route = useRoute();
const form = ref({
    page: 1,
    pageSize: 20
});
const getList = (id) => {
    getDetailPageList({
        template_id: id,
        page: form.value.page,
        pageSize: form.value.pageSize
    }).then((res) => {
        console.log(res, '---');
        userTaskList.value = res.data.res.items;

        pageList.value.total = res.data.res.pageInfo.total;
    });
};
if (route.query.id) {
    getList(route.query.id);
}
const pageList = ref({
    total: 0
});
const disable = ref(false);
const username = getUserInfo().user.username;
const { proxy } = getCurrentInstance();
const crudImportRef = ref();
const from = ref({});

const obj = ref({
    page: 1,
    pageSize: 20,
    is_checked: 0
});
const tableList = ref([]);
const loading = ref(false);
const projectList = ref([]);
const totalNum = ref(0);
const userTaskList = ref([]);
const projectName = ref();
const data = ref([
    { label: t('basics.yes'), value: 1 },
    { label: t('basics.no'), value: 0 }
]);
const downFile = ref({
    url: 'cloud/resendTemplate/download'
});
const rules = ref({
    template_name: [
        {
            required: true,
            message: t('basics.rewubitian')
        }
    ],
    project_id: [
        {
            required: true,
            message: t('basics.warnPro')
        }
    ]
});
const rowSelection = reactive({
    type: 'checkbox'
});
const columns = [
    {
        title: t('basics.xuhao'),
        dataIndex: 'id',
        minWidth: 60,
        align: 'center'
    },
    {
        title: t('basics.TemplateName'),
        dataIndex: 'template_content',
        minWidth: 180,
        slotName: 'began_at',
        ellipsis: true,
        tooltip: true,
        align: 'center'
    }
];
const detail = (item) => {
    router.push({ path: `/detail`, query: { id: item.id } });
    getDetailPageList({ template_id: item.id }).then((res) => {});
};
const changeStatus = (item) => {
    disable.value = true;
    setIsChecked({ id: item.id }).then((res) => {
        Message.success(res.message);
        disable.value = false;
        getUserTask();
    });
};
// 获取美国短信id
const getId = () => {
    getProjectId({ project_key: 'america' }).then((res) => {
        form.value.project_id = res.data.id;
        projectName.value = res.data.project_name;
        getUserTask();
    });
};
getId();
const deleted = (item, modeals) => {
    // myDelete
    proxy.$modal.warning({
        title: t('basics.xitongtishi'),
        content: t('basics.ninuqeding') + t(`basics.${modeals}`) + '?',
        hideCancel: false,
        cancelText: t('basics.concel'),
        okText: t('basics.sure'),
        simple: false,
        onOk: () => {
            disable.value = true;
            myDelete({ ids: [item.id] }).then((res) => {
                Message.success(res.message);
            });
        }
    });
};
const importButton = (params) => {
    crudImportRef.value.open();
    proxy.$refs['bandFormRef'].validate((valid) => {
        if (!valid) {
        }
    });
};

//   导入成功后
const refresh = () => {
    getUserTask();
};
const router = useRouter();

const importFile = ref({
    url: 'cloud/resendTemplate/import',
    params: form.value
});

const getUserTask = () => {
    loading.value = true;
};
</script>
<script>
export default { name: 'cloud:resend' };
</script>

<style lang="less" scoped>
@import url('@/style/layout.less');
// :deep(.work-area) {
//     height: 100vh;
//     overflow: hidden !important;
// }
// .search {
//     color: #fff;
//     background: transparent;
//     height: 40px;

//     border-radius: 10px 10px 10px 10px;
// }
// :deep(.arco-pagination-item:hover) {
//     background: #333c4a;
// }
// :deep(.arco-pagination-item-active) {
//     background: #333c4a;
// }
// .export {
//     background: #384252;
//     width: 100px;
//     height: 40px;
//     border-radius: 51px 51px 51px 51px;
// }
// .reset {
//     width: 100px;
//     height: 40px;
//     background: #4780ff;
//     border-radius: 51px 51px 51px 51px;
// }
// .arco-table-th {
//     background-color: transparent;
//     height: 60px;
//     font-weight: 800;
//     color: #fff !important;
// }
// :deep(.arco-table-border .arco-table-tr .arco-table-th) {
//     border-bottom: 1px solid transparent;
//     background: rgba(209, 230, 255, 0.09);
// }
// :deep(.arco-table-td) {
//     background: rgba(51, 59, 72, 0.6);
// }
// :deep(.arco-table-td) {
//     border: 0px solid rgba(51, 59, 72, 0.6);
// }
// :deep(.arco-table-border .arco-table-container) {
//     border: 0px solid #333b48;
// }
// .arco-table-td {
//     height: 60px;
//     // color: red;
// }
// .taskForm {
//     .arco-row {
//         :deep(.arco-form-item-label) {
//             text-align: end;
//             width: 100px;
//             position: relative;
//             top: 6px;
//             color: #fff;
//             font-weight: 600;
//         }
//         :deep(.arco-input-wrapper) {
//             max-width: 260px;
//             height: 40px;
//             border-radius: 15px;

//             //   background: #363942;
//         }
//         :deep(.arco-form-item-content-wrapper) {
//             max-width: 260px;
//         }
//         :deep(.arco-select-view-single) {
//             height: 40px;
//             max-width: 200px;
//             border-radius: 15px;
//         }
//     }
//     :deep(.arco-input-wrapper) {
//         background: #363942;
//     }
//     :deep(.arco-select-dropdown) {
//         background: #565a64 !important;
//         border: 1px solid #565a64;
//     }
//     .btnUpdate {
//         height: 40px;
//         max-width: 100px;
//         border-radius: 20px;
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         font-size: 12px;
//         font-weight: 500;
//         color: #ffffff;
//         cursor: pointer;
//         background: #3976ff;
//     }
//     .btnRefresh {
//         height: 40px;
//         max-width: 100px;
//         border-radius: 20px;
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         font-size: 12px;
//         font-weight: 500;
//         color: #ffffff;
//         cursor: pointer;
//         background: rgba(51, 59, 72, 0.56);
//     }
// }
// .container-formSearch {
//     display: flex;
//     justify-content: space-between;
//     padding: 24px 40px 24px 24px;
// }
// .app-container {
//     .container-content-header {
//         font-weight: 800;
//         border-radius: 20px 20px 20px 20px;
//         background-color: #333b48;
//         height: 50px;
//         display: flex;
//         justify-content: space-between;
//         align-items: center;

//         .tasks {
//             // color: #000000;
//             font-weight: bold;
//             color: #fff;
//             margin-left: 20px;
//             margin-right: 20px;
//         }
//         .refresh {
//             cursor: pointer;
//         }
//     }
//     .container-content-bottom {
//         color: red;
//         text-align: end;
//     }

//     .container-head {
//         padding: 20px;
//         .formButton {
//             display: flex;
//             justify-content: center;
//             align-items: center;
//         }
//     }
// }
// .dialog-foot {
//     text-align: end;
// }
// .container-content {
//     background: rgba(51, 59, 72, 0.56);
//     padding: 28px 22px 24px 19px;
//     margin-right: 40px;
//     margin-left: 24px;
//     border-radius: 20px 20px 20px 20px;

//     .container-content-button {
//         width: 684px;
//         margin-bottom: 10px;
//         .arco-btn {
//             margin-right: 10px;
//         }
//     }
// }
// :deep(
//         .arco-table-hover:not(.arco-table-dragging)
//             .arco-table-tr:not(.arco-table-tr-empty):not(
//                 .arco-table-tr-summary
//             ):hover
//             .arco-table-td:not(.arco-table-col-fixed-left):not(
//                 .arco-table-col-fixed-right
//             )
//     ) {
//     background: rgba(51, 59, 72, 0.56) !important;
// }
// :deep(.arco-table-border .arco-table-tr .arco-table-th) {
//     background: #3e434e;
// }
// :deep(.arco-table-th) {
//     color: #fff;
// }
// :deep(.arco-table-td) {
//     color: #fff;
// }
// :deep(.arco-table-td:hover) {
//     background: #3e434e;
// }
// thead {
//     background: #353e4b;
// }
// th {
//     color: #fff !important;
// }
// .arco-table-th {
//     color: #fff !important;
// }
// :deep(.arco-table-body) {
//     background: transparent !important;
// }

// //分页
// :deep(.arco-pagination-total) {
//     color: #fff;
// }

// :deep(.arco-pagination-jumper-text-goto, .arco-pagination-jumper-prepend) {
//     color: #fff;
// }
// :deep(.arco-select-view-single) {
//     background: #333c4a;
//     color: #fff;
// }
// :deep(.arco-input-wrapper) {
//     background: #333c4a;
//     color: #fff;
// }
// //-------------
// :deep(.arco-select-dropdown) {
//     background: blue !important;
// }

// ::v-deep .taskForm .arco-row[data-v-4b4b67de] .arco-form-item-label {
//     width: 30px;
// }
// :deep(.arco-table-td:hover) {
//     background: #3e434e;
// }
// thead {
//     background: #353e4b;
// }

// ::v-deep .arco-table-th {
//     background: #2a3448;
//     color: #fff;
//     border: none;
//     padding: 5px 0;
// }
// ::v-deep .arco-table-border .arco-table-tr .arco-table-th {
//     border: none;
// }
// ::v-deep .arco-table-td {
//     background: #272c38 !important;
//     color: #fff;
//     border-bottom: none;
// }
</style>
